<template>
  <div class="about">
    <p>{{count}}</p>
    <button @click="count++">修改count</button>
    <br/>
    <button @click="obj = {name:'x',age:13,hobby: ['x']}">修改obj</button>
    <br/>
    <button @click="obj.age = 15">修改obj里面的值</button>
    <p></p>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"AboutView",
})
</script>

<script lang="ts" setup>
import {watch, ref} from "vue";

const count = ref(0)
const obj = ref({
    name:"xiaoqi",
    age:12,
    hobby:["篮球","足球","羽毛球"]
})

watch(count,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
})
// watch(obj,(newVal,oldVal)=>{
//     console.log(newVal,oldVal)
// },{deep:true})

watch(()=>obj.value.age,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
},{deep:true})

</script>

<style lang="scss" scoped>
.about{
  height: 600px;
  width: 100%;
  border: 1px solid #2c3e50;
}
</style>